<form id="form-customer" method="post" data-oc-toggle="ajax" data-oc-load="{{ action }}" data-oc-target="#customer">
	<div class="table-responsive">
		<table class="table table-bordered table-hover">
			<thead>
				<tr>
					<td class="text-center" style="width: 1px;"><input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', $(this).prop('checked'));" class="form-check-input"/></td>
					<td class="text-start"><a href="{{ sort_name }}"{% if sort == 'name' %} class="{{ order|lower }}"{% endif %}>{{ column_name }}</a></td>
					<td class="text-start"><a href="{{ sort_email }}"{% if sort == 'c.email' %} class="{{ order|lower }}"{% endif %}>{{ column_email }}</a></td>
					<td class="text-start"><a href="{{ sort_customer_group }}"{% if sort == 'customer_group' %} class="{{ order|lower }}"{% endif %}>{{ column_customer_group }}</a></td>
					<td class="text-start d-none d-lg-table-cell"><a href="{{ sort_status }}"{% if sort == 'c.status' %} class="{{ order|lower }}"{% endif %}>{{ column_status }}</a></td>
					<td class="text-start d-none d-lg-table-cell"><a href="{{ sort_date_added }}"{% if sort == 'c.date_added' %} class="{{ order|lower }}"{% endif %}>{{ column_date_added }}</a></td>
					<td class="text-end">{{ column_action }}</td>
				</tr>
			</thead>
			<tbody>
				{% if customers %}
					{% for customer in customers %}
						<tr>
							<td class="text-center"><input type="checkbox" name="selected[]" value="{{ customer.customer_id }}" class="form-check-input"/></td>
							<td class="text-start">{{ customer.name }}</td>
							<td class="text-start">{{ customer.email }}</td>
							<td class="text-start">{{ customer.customer_group }}</td>
							<td class="text-start d-none d-lg-table-cell">{{ customer.status }}</td>
							<td class="text-start d-none d-lg-table-cell">{{ customer.date_added }}</td>
							<td class="text-end">
								<div class="btn-group">
									<a href="{{ customer.edit }}" data-bs-toggle="tooltip" title="{{ button_edit }}" class="btn btn-primary"><i class="fas fa-pencil-alt"></i></a>
									<button type="button" data-bs-toggle="dropdown" class="btn btn-primary dropdown-toggle dropdown-toggle-split"><span class="fas fa-caret-down"></span></button>
									<div class="dropdown-menu dropdown-menu-right">
										<h6 class="dropdown-header">{{ text_option }}</h6>
										{% if customer.unlock %}
											<a href="{{ customer.unlock }}" class="dropdown-item"><i class="fas fa-unlock"></i> {{ text_unlock }}</a>
										{% else %}
											<a href="#" class="dropdown-item disabled"><i class="fas fa-unlock"></i> {{ text_unlock }}</a>
										{% endif %}
										<div class="dropdown-divider"></div>
										<h6 class="dropdown-header">{{ text_login }}</h6>
										{% for store in customer.store %}
											<a href="{{ store.href }}" target="_blank" class="dropdown-item"><i class="fas fa-lock"></i> {% if customer.store_id == store.store_id %}<span class="text-primary">{{ store.name }}</span>{% else %}{{ store.name }}{% endif %}</a>
										{% endfor %}
									</div>
								</div>
							</td>
						</tr>
					{% endfor %}
				{% else %}
					<tr>
						<td class="text-center" colspan="7">{{ text_no_results }}</td>
					</tr>
				{% endif %}
			</tbody>
		</table>
	</div>
	<div class="row">
		<div class="col-sm-6 text-start">{{ pagination }}</div>
		<div class="col-sm-6 text-end">{{ results }}</div>
	</div>
</form>